<template>
  <div id="component_tzgg">
    <ul>
      <li v-for="(tgs,tg_index) in tgsList" :key="tg_index" :href="tgs.url" class="component_tgs_item">
        <a :href="tgs.url">{{tgs.title}}</a><span>{{tgs.date}}</span>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tgsList:[
        {title:"让党心和民心贴得更紧——写在习近平总书记“2·19”重要讲话发表3周年之际",date:"2020-02-22",url:""},
        {title:"跨越发展正当时（在习近平新时代中国特色社会主义思想指引下——新时代新作为新篇章）",date:"2020-02-22",url:""},
        {title:"一线明察暗访 忠诚履职担当",date:"2020-02-22",url:""},
        {title:"2019年小客车指标配额为10万",date:"2020-02-22",url:""},
        {title:"非现场交通违法可扫码缴罚款",date:"2020-02-22",url:""},
        {title:"让党心和民心贴得更紧",date:"2020-02-22",url:""},
        {title:"让党心和民心贴得更紧——写在习近平总书记“2·19”重要讲话发表3周年之际",date:"2020-02-22",url:""},
        {title:"跨越发展正当时（在习近平新时代中国特色社会主义思想指引下——新时代新作为新篇章）",date:"2020-02-22",url:""},
      ],
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
#component_tzgg{
  display:block;
  padding:10px;
  position: relative;
  width: 100%;
  ul,li{
    display: block;
    position: relative;
    overflow: hidden;
  }
  li{
    line-height: 20px;
    padding-top:7px;
    padding-bottom:7px;
    padding-right: 10px;
    padding-left: 20px;
    list-style: none;
    position:relative;
    &::before{
      content:"";
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color:#0ea1e8;
      // box-shadow:4px 0 rgba(0,0,0,1);
      position:absolute;
      overflow:visible;
      left:8px;
      top:calc(50% - 2px)
    }
    a{
      word-wrap: no-wrap;
      text-overflow:ellipsis;
      overflow:hidden;
      white-space: nowrap;
      width: calc(100% - 80px);
      display: inline-block;
      position:relative;
      float:left;
      color:#666;
      &:hover{
        color:#0ea1e8;
      }
    }
    span{
      display: inline-block;
      font-size:12px;
      float:right;
      position:relative;
      color:#999999;
    }
  }
}
</style>
<style lang="scss" scoped>
</style>